import { defineComponent, computed, ref,   } from "vue";

export default defineComponent({
    props: ['msg'],
    setup(props) {
        // 响应式数据
        const message = ref('使用 JSX 语法自定义渲染模板：' + props.msg)
        const inputValue = ref('')
        // 定义盒子样式
        const borderStyle = {
            border: '3px solid deeppink',
            padding: '10px',
            margin:'10px'
        }
        // 定义button按钮样式
        const btnStyle = {
            padding: '3px 6px',
            backgroundColor:' #ddd',
            borderRadius: '3px',
            marginRight:'8px'
        }

        // 计算属性
        const computedMessage = computed(() => {
            return `${message.value} (computed)`
        })

        // 方法
        const updateMessage = () => {
            message.value = '信息更新了！'
        }

        // JSX 渲染函数
        return () => (
            <div style={borderStyle}>
                <h3>SonDemo5</h3>
                <h3>{message.value}</h3>
                <p>{computedMessage.value}</p>
                <button onClick={updateMessage} style={btnStyle}>更新信息</button>
                <input v-model={inputValue.value} placeholder="请输入信息" />
                <p>input输入框的值：{ inputValue.value}</p>
            </div>
        )
    },
})


